<template>
  <Header>
    <router-link to="/home" class="layout-logo">
      Logo here
    </router-link>
    <div class="layout-nav">
       <Dropdown
        v-if="/^\/edit-article/.test($route.path) && hasLogin && $route.params.sign !== ''"
        :transfer='true'
        @on-click="saveArticle"
      >
        <span class="create save">
          <Icon type="ios-done-all" />
          Save it
        </span>
        <DropdownMenu slot="list">
            <DropdownItem name="html">html</DropdownItem>
            <DropdownItem name="css">css</DropdownItem>
            <DropdownItem name="javascript">javascript</DropdownItem>
            <DropdownItem name="vue">vue</DropdownItem>
            <DropdownItem name="react">react</DropdownItem>
        </DropdownMenu>
    </Dropdown>
      <router-link to="/edit-article" v-else-if="hasLogin" class="create">
        <Icon type="ios-add" />
        New Article
      </router-link>
      <span class="hello-user" v-if="hasLogin">
      <Dropdown @on-click='personal'>
          <a href="javascript:void(0)">
            hello,
            <strong v-text="username"></strong>
              <Icon type="ios-arrow-down"></Icon>
          </a>
          <DropdownMenu slot="list">
              <DropdownItem name='editArticle'>我的文章</DropdownItem>
          </DropdownMenu>
      </Dropdown>
      </span>
      <span v-if="hasLogin" @click="logout">
        <Icon type="ios-log-out" />
        Log out
      </span>
      <span v-else-if="$route.path !== '/login'" @click="$router.push('/login')">
        <Icon type="ios-log-in" />
        Log in
      </span>
    </div>
  </Header>
</template>

<script>
import CreateArticle from '@/views/article/bll'
export default {
  name: 'headpart',
  computed: {
    hasLogin: function () {
      return this.$store.getters.token
    },
    username: function () {
      return this.$store.getters.username
    }
  },
  methods: {
    logout () {
      this.$store.commit('SET_USER')
      this.$Message.success('登出成功')
      this.$router.push('/login')
    },
    // 保存文章, 此处name来自下拉列表
    saveArticle (name) {
      this.createArticle.save(name)
    },
    // 个人中心入口
    personal (name) {
      this.$router.push(`/${name}`)
    }
  },
  created () {
    this.createArticle = new CreateArticle(this)
  }
}
</script>

<style>
.ivu-select-dropdown.ivu-dropdown-transfer{
  z-index: 1501;
}
</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='less'>
@import url('./headpart');
</style>
